<template>
  <div style="height:30px;" v-if="cuIsRouteCallDetail">
    <el-breadcrumb separator="/" style="display:inline-block;line-height: 30px;height:30px;float:left;">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item v-for="(item,index) in brumblist" :key="index" :to="{path: item.path}">{{item.meta.title}}</el-breadcrumb-item>
    </el-breadcrumb>
    <span v-if="isCalling" :class="$style.calling">电话正在接通 <i :class="$style.call"></i> <b :class="$style.back" @click="backCallDetail">返回通话详情</b></span>
  </div>
</template>
<script>
export default {
  data() {
    return {
      brumblist: [],
      isCalling:false
    }
  },
  computed: {
    cuIsRouteCallDetail() {
      const fullPath = this.$route.fullPath
      const flag = new RegExp('call-center/call-detail').test(fullPath)
      return !flag
    }
  },
  watch: {
    $route(val) {
      let brumblist = this.$route.matched
      // add 会员管理详情页能够导回到会员管理页面
      if(val.path.includes('/vip-manage/detail')){
        brumblist.forEach((item,index) => {
          item.path = index === 0 ? '/vip-manage' : ''
          brumblist[index] = item
        })
      }
      this.brumblist = brumblist

      // 当从其他界面进入到这个界面的时候开始判断
      const isCalling = this.$store.getters.callMsg.callType === '' ? false : true
      this.isCalling = isCalling
      // 当处于非通话状态时，不允许进入通话详情页面
      if(new RegExp(/\/call-center\/call-detail/).test(val.fullPath) && !isCalling){
        // this.$router.replace('/')
        return
      }
    }
  },
  methods: {
    backCallDetail() {
      this.$router.push('/call-center/call-detail')
    }
  },
}
</script>
<style lang="scss" module>
.calling {
  display: inline-block;
  margin-left: 20px;
  float: left;
  font-size: 13px;
  line-height: 30px;
  color:#666;
}
.call{
  display:inline-block;
  width:20px;
  height:20px;
  margin:0 20px 0 5px;
  background:url(./images/call.png) no-repeat 0 0;
  background-size:100% 100%;
  transform:translateY(5px);
}
.back{
  cursor: pointer;
  font-weight:normal;
  &:hover{
    color:#20a0ff;
  }
}
</style>



